@import './mixin';
@import './size';
.minAvatar{
    width: $_40;
    height: $_40;
    border-radius: 50%;
    overflow: hidden;
    
}
.avatar{
    width: $_80;
    height: $_80;
    border-radius: 50%;
    overflow: hidden;
    background: #e5e5e5;
    position: relative;
}
.user{
    @include dfc;
    padding-bottom: $_100;
    .userNav{
        padding-bottom: $_50;
        background: $cblue;
        .navItem{
            @include dfrcs;
            height: $_56;
            padding: 0 $_50;
            // width: $_190;
            background: $cblue;
            .iconfont:before{
                font-size: $_16;
                color: #fff;
            }
        }
        .navItem.active,.navItem:hover{
            background: #99A7CC;
        }
    }
    /*账户中心*/
    .center{
        @include dfc;
        flex: 1;
        .top{
            @include dfr;
            align-items: center;
            justify-content: space-around;
            width: 100%;
            background: #fff;
            padding: $_15 $_30 ;
            color: #555;
            .topC{
                @include dfr;
                padding: $_30;
                border-left: $_1 solid #e5e5e5;
                border-right: $_1 solid #e5e5e5;
                .item{
                    @include dfc;
                    align-items: center;
                    min-width: $_100;
                    .iconWrapper{
                        @include dfrc;
                        width:$_50;
                        height:$_50;
                        border:$_2 solid $cblue;
                        border-radius:50%;
                        .iconfont:before{
                            font-size:$_24;
                            color: $cblue;
                            font-weight: bold;
                        }
                    }
                    
                }
            }
            .rItem{
                margin-top: $_15;
            }
        }
        .bottom{

        }
    }

    /*订单表格样式*/
    .orderTable{
        .orderImg{
            min-width: $_102;
            width: $_102;
            height: $_68;
            background: #e5e5e5;
        }
        .orderTitle{
            @include overhide2;
            margin: 0 $_10;
            text-align: left
        }
        .actionBtn{
            @include btn;
            padding: $_9 $_16;
        }
        .actionBtn:hover{
            opacity: 0.85;
            color: #fff;
        }
        p{
            margin-bottom: 0;
        }
        .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
            padding: $_10;
        }
    }

    .userCWrapper{
        background: #fff;
        padding: 0 $_20;
        @include dfc;
        flex: 1;
        .ltWrapper{
            @include dfrcb;
            padding:$_25  0;
            border-bottom: $_1 solid #e5e5e5;
            width: 100%;
        }
        .ant-tabs-bar{
            border-bottom: none;
        }
        .ant-table-thead{
            border-top: $_1 solid #e5e5e5;
        }
        .ant-tabs-nav .ant-tabs-tab{
            font-size: $_16;
        }
        .ant-tabs-nav .ant-tabs-tab:hover,.ant-tabs-nav .ant-tabs-tab-active{
            color: $cblue;
        }
        .ant-tabs-ink-bar{
            background-color: $cblue;
        }
    }
    /*我的订单*/
    .myOrder{
        width: 100%;
        position: relative;
        .condition{
            @include dfr;
            align-items: stretch;
            position: absolute;
            width: 100%;
            top: $_150;
            z-index: 99;
            .label{
                margin-right: $_30;
                .input{
                    width: $_150;
                }
                .input:focus{
                    border-color: $cblue;
                }
                .ant-calendar-picker-input:hover{
                    border-color: $cblue;
                }
                .ant-calendar-picker-input{
                    width:$_290;
                }
            }
            .searchBtn{
                border-radius: $_2;
                font-size: $_14
            }
        }
        .ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content{
            margin-top: $_65;
        }
        .ant-checkbox-inner{
           transform: scale(0.8)
        }
    }
    /*我的评价*/
    .myOrder.myComment,.myOrder.myCollect{
        .ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content{
            margin-top: 0;
        }
    }

    /*个人信息编辑*/
    .editWrapper{
        @include dfcc;
        height: 100%;
        padding: $_30 0;
        .avatar{
            margin-bottom: $_30
        }
        .label{
            margin: 0 0 $_30;
            .input{
                width:$_400;
                height: $_32;
                line-height: $_32;
                border: $_1 solid #e5e5e5; 
            }
            .mr10{
                font-size: $_14;
                display: inline-block;
                width: $_80;
                color: #555;
                letter-spacing: $_1;
            }
            .input:hover，.input:focus{
                border-color: $cblue
            }
        }
      
    }
    /*我的收藏*/
    .myCollect{
        .ant-tabs{
            margin-top: $_20;
            
        }
        .actions{
            margin: $_15 0;
            position: absolute;
            z-index: 6;
            top: $_105;
            right: $_25;
          a{
              padding: $_5 $_9;
              font-size: $_14;
              border-radius: $_4;
          }
          .btn.primary{
            background: $cblue;
            color: #fff;
            border: $_1 solid $cblue
        }
            .btn.default{
                background: #fff;
                color: $cblue;
                border: $_1 solid $cblue
            }
        }
    }

    /*消息中心*/
    .message{
        .msgItem{
           padding: $_15 0;
           @include dfr;
           border:$_1 solid rgba(229,229,229,1);
            border-radius:$_2;
           justify-content: space-around;
           margin-top: $_25;
           .logoWrapper{
            width: $_48;
            height: $_48;
            margin-top: $_10;
            .logo{
                width: $_48;
                height: $_48;
            }
           }
           
           .msgContent{
               width: 85%;
               margin-top: $_15;
           } 
        }
    }

    /*优惠券*/
    .myCoupon{
        .couponList{
            @include dfr;
            flex-wrap: wrap;
            .item:nth-child(3n){
                margin-right: 0;
            }
            .item{
                width: $_300;
                height: $_100;
                margin-top: $_20;
                margin-right: $_15;
                
                .wrapper{
                    @include dfr;
                    width: $_300;
                     height: $_100;
                    padding: $_5 $_10;
                    .left{
                        @include dfcc;
                        width: $_88;
                        small,span{
                            color: #fff;
                        }
                    }
                    .right{
                        @include dfc;
                        justify-content: flex-end;
                        padding: $_10;
                        width: $_192;  
                        .title{
                            display: inline-block;
                            height: 80%;
                            overflow: hidden;
                            font-size: $_16;
                            color: #555
                        }
                        .title.expire{
                            width: 80%;
                        }
                    }
                }
            }
            .item.useful{
                background: url('../img/user/weishiyong.png');
                background-size: $_300
            }
            .item.expire{
                background: url('../img/user/yiguoqi.png');
                background-size: $_300
            }
        }

    }

    /*安全设置*/
    .security{
        .actItem{
            padding: $_15 0;
            border-bottom: $_1 solid #e5e5e5;
            .act{
                margin: 0 $_20;
                font-size: $_16;
                color: $cblue;
                cursor: pointer;
            }
            .desc{
                font-size: $_14;
                color: #999;
                margin-left:$_45;
                margin-top: $_5;
            }
        }
        .label.code{
            
            .input{
                width: $_286
            }
            .vaildCode{
                padding: 0;
                width: $_104;
                justify-content: center;
                margin-left: $_10;
                height: $_32;
            }
        }

    }
    .btn{
       padding:0 $_32;
       font-size: $_14;
       border-radius: $_2
    }
    .btn:hover{
        opacity: 0.85;
    }
    .btn.primary{
        background: $cred;
        color: #fff;
        border: $_1 solid $cred;
    }
    .btn.default{
        background: #fff;
        color: $cred;
        border: $_1 solid $cred;
    }
}

//上传头像模态框
.avatarModal{
    width: $_940!important;
    padding: $_15;
    .origin,.preview{
        @include dfcc;
        width: 50%;
    }
   
    .uploadBtn{
        font-size: $_14;
        padding: $_9 $_16;
        color: #fff;
        border-radius: $_4;
        background: $cred;
    }
    .preview{
        border-left: $_1 solid #e5e5e5;
    }
    .img-preview{
        border-radius: 50%;
        overflow: hidden;
    }
}
.avatarModal,.commentModal{
    .ant-btn-primary{
        background-color: $cred;
        border-color:$cred;
    }
    .ant-btn-primary:hover{
        background-color: $cblue;
    }
}

//评价页模态框
.commentModal{
    width: $_940!important;
    .ant-modal-body{
        padding: $_25 $_50;
    }
    .label{
        min-width: $_50;
        @include normal;
        p{
            @include normal
        }
        
    }
    .imgItem{
        height: $_112;
        width: $_112;
        background: #e5e5e5;
        float: left;
        margin: $_20 $_20 0 0;
    }
    
}

